<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
   	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
   	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
	<title></title>
	<link href="/css/lanai-ui.css" rel="stylesheet" />
	<link href="/plugins/treegrid/bootstrap-table.min.css" rel="stylesheet">
	<link rel="stylesheet" href="/plugins/treegrid/jquery.treegrid.min.css">

</head>
<body>
<div class="box-body">
    <table id="table"></table>
    <br/>
    <button onclick="test()">选择</button>
</div>

<!-- 第一个弹框--新增 -->
<div class="myModelOne">			
		<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				  	<label for="demo-select">名称</label>
				      <div class="form-group has-feedback">
				      <input type="text" id="menuname" class="form-control" placeholder="请输入名称">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertMenumsg"></span>
				      </div>
				      <div class="form-group has-feedback">
								<div class="form-group">
				                	<label for="demo-select">备注选项</label>
				                	<select class="form-control" id="menuselect">
				                		<option value='0'>一级菜单</option>
				                		<option value='1'>二级菜单</option>
				                		<option value='2'>三级菜单</option>
				                		
				                	</select>
				                </div>
					 </div>
					 <div class="form-group has-feedback">
					 	<label for="demo-select">图标代码</label>
				     	<input type="text" id="menuico" class="form-control" placeholder="请输入图标代码,如二级菜单:fa-columns">
				        <span class="fa fa-user form-control-feedback"></span>
				     </div>
				      <div class="form-group has-feedback">
	                  <label for="demo-select">URL</label>
					      <input type="text" id="menuurl" class="form-control" placeholder="请输入URL">
					      <span class="fa fa-user form-control-feedback"></span>
				      </div>
				      
				      <div class="form-group has-feedback">
	                  <label for="demo-select">权限值</label>
					      <input type="text" id="addauthvalue" class="form-control" placeholder="请输入权限值">
					      <span class="fa fa-user form-control-feedback"></span>
				      </div>
				      
				      <div class="row">
				      <label for="demo-select">&nbsp;&nbsp;&nbsp;&nbsp;类型</label>
							<div class="col-sm-12">
	                             <div class="radio radio-inline radio-success">
	                                <input type="radio" name="addradio" id="radio3" value="1">
	                                <label for="radio3">
	                                    	<font color="green">菜单</font>
	                                </label>
	                            </div>
	                            <div class="radio radio-inline radio-danger">
	                                <input type="radio" name="addradio" id="radio4" value="2">
	                                <label for="radio4">
	                                    	<font color="red">按钮</font>
	                                </label>
	                            </div>

							</div>
						</div>
				    
	                 
				</from>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="insertcolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="insertMenu()">提交</button>
				<input type="hidden" id="editmid" value="0">
				<input type="hidden" id="editpid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>


<!-- 第二个弹框--更改 -->
<div class="myModelOne">			
		<!-- 模态框（Modal） -->
<div class="modal fade" id="myupdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					更改
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				  	<label for="demo-select">名称</label>
				      <div class="form-group has-feedback">
				      <input type="text" id="updatemenuname" class="form-control" placeholder="请输入名称">
				        <span class="fa fa-user form-control-feedback"></span><span id="insertMenumsg"></span>
				      </div>
				      <div class="form-group has-feedback">
								<div class="form-group">
				                	<label for="demo-select">备注选项</label>
				                	<select class="form-control" id="updatemenuselect">
				                		<option value='0'>一级菜单</option>
				                		<option value='1'>二级菜单</option>
				                		<option value='2'>三级菜单</option>
				                		
				                	</select>
				                </div>
					 </div>
					 <div class="form-group has-feedback">
					 	<label for="demo-select">图标代码</label>
				     	<input type="text" id="updatemenuico" class="form-control" placeholder="请输入图标代码,如二级菜单:fa-columns">
				        <span class="fa fa-user form-control-feedback"></span>
				     </div>
				      <div class="form-group has-feedback">
	                  <label for="demo-select">URL</label>
					      <input type="text" id="updatemenuurl" class="form-control" placeholder="请输入URL">
					      <span class="fa fa-user form-control-feedback"></span>
				      </div>
				      <div class="form-group has-feedback">
	                  <label for="demo-select">权限值</label>
					      <input type="text" id="updatemenuauthvalue" class="form-control" placeholder="请输入权限值">
					      <span class="fa fa-user form-control-feedback"></span>
				      </div>
				      
				      <div class="row">
				      <label for="demo-select">&nbsp;&nbsp;&nbsp;&nbsp;类型</label>
							<div class="col-sm-12">
	                             <div class="radio radio-inline radio-success">
	                                <input type="radio" name="updateradio" id="radio3" value="1">
	                                <label for="radio3">
	                                    	<font color="green">菜单</font>
	                                </label>
	                            </div>
	                            <div class="radio radio-inline radio-danger">
	                                <input type="radio" name="updateradio" id="radio4" value="2">
	                                <label for="radio4">
	                                    	<font color="red">按钮</font>
	                                </label>
	                            </div>

							</div>
						</div>
				    
	                 
				</from>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="updateMenucolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="updateMenu()">提交</button>
				<input type="hidden" id="updatemid" value="0">
				<input type="hidden" id="editpid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>



<!-- 第三个弹框--删除 -->
<!-- 第一个弹框 -->
<div class="myModelThree">	
<div class="modal fade" id="mydeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					确认删除这条信息?
				</h4>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="deletecolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="deleteMenuByMid()">删除</button>
				<input type="hidden" id="editmid" value="0">
				<input type="hidden" id="editpid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>

</body>
<script src="/plugins/treegrid/jquery.min.js"></script>
<script src="/js/lanai-ui.js"></script>
<script src="/plugins/treegrid/bootstrap-table.min.js"></script>
<script src="/plugins/treegrid/bootstrap-table-treegrid.js"></script>
<script src="/plugins/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript">
    var $table = $('#table');
    var data = {};
    
    
    function initLoadTreeData(){
    	$.ajax({
    		type:"post",
    		url:"/sys/queryMenu",
    		data:{},
    		dataType:"json",
    		success:function(ret){
    			data = ret.data;
    			$table.bootstrapTable('load', data);
    		},
    		error:function(e){
    			alert("e:"+e);
    		}
    	});
    }
    

    $(function() {
    	initLoadTreeData();
    	
        //控制台输出一下数据
        console.log(data);

        $table.bootstrapTable({
            data:data,
            idField: 'mid',
            dataType:'jsonp',
            columns: [
                { field: 'check',  checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                           // console.log(row.serverName);
                            //设置选中
                            return {  checked: true };
                        }
                    }
                },
                { field: 'menuname',  title: '名称' },
               // {field: 'id', title: '编号', sortable: true, align: 'center'},
               // {field: 'pid', title: '所属上级'},
               // { field: 'status',  title: '状态', sortable: true,  align: 'center', formatter: 'statusFormatter'  },
                { field: 'remark', title: '备注'},
                { field: 'ico', title: '图标'},
                { field: 'type', title: '类型',
	               	formatter: function(value, row, index){
	                	if(value==1){
	                		return "<font color='green'>菜单</font>";
	                	}
	               		return "<font color='red'>按钮</font>";
                }},
                { field: 'url', title: 'URL'  },
                { field: 'authvalue', title: '权限值'  },
                { field: 'operate', title: '操作', align: 'center', events : operateEvents, formatter: 'operateFormatter' },
            ],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'menuname',
            //指定父id列
            parentIdField: 'pid',
            
            onResetView: function(data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function() {
                        $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');

            },
            onCheck:function(row){
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas,row,"mid","pid",true);

                // 勾选父类
                selectParentChecked(datas,row,"mid","pid")

                // 刷新数据
                $table.bootstrapTable('load', datas);
            },

            onUncheck:function(row){
                var datas = $table.bootstrapTable('getData');
                selectChilds(datas,row,"mid","pid",false);
                $table.bootstrapTable('load', datas);
            },
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfadd btn-small  btn-primary" data-toggle=\"modal\" data-target=\"#myModal\" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>',
            '<button type="button" class="RoleOfedit btn-small   btn-primary" data-toggle=\"modal\" onclick="showMenu()" data-target=\"#myupdateModal\" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
            '<button type="button" class="RoleOfdelete btn-small   btn-primary" data-toggle=\"modal\" data-target=\"#mydeleteModal\" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
        ].join('');

    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {  return '菜单';  }
        if (value === 'button') {  return '按钮'; }
        if (value === 'api') {  return '接口'; }
        return '-';
    }
    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .RoleOfadd': function (e, value, row, index) {
            add(row.mid,row.pid);
            $("#editmid").val(row.mid);
            $("#editpid").val(row.pid);
        },
        'click .RoleOfdelete': function (e, value, row, index) {
            del(row.mid,row.pid);
            $("#editmid").val(row.mid);
            $("#editpid").val(row.pid);
        },
        'click .RoleOfedit': function (e, value, row, index) {
            update(row.mid,row.pid);
            $("#updatemid").val(row.mid);
            $("#editpid").val(row.pid);
        }
    };
</script>
<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,mid,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[mid]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],mid,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,mid,pid){
        for(var i in datas){
            if(datas[i][mid] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],mid,pid);
            };
        }
    }

    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }

        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.mid;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);

    }
    
    //刷新data
    
    function initLoadTreeData(){
    	$.ajax({
    		type:"post",
    		url:"/sys/queryMenu",
    		data:{},
    		dataType:"json",
    		success:function(ret){
    			data = ret.data;
    			$table.bootstrapTable('load', data);
    		},
    		error:function(e){
    			alert("e:"+e);
    		}
    	});
    }
    
    //新增
    
    function insertMenu(){
    	var mid = $("#editmid").val();
    	var pid = $("#editpid").val();
    	var menuname = $("#menuname").val();
    	if(!menuname){
    		$("#insertMenumsg").html("<font color='red'>名称不能为空</font>");
    		return;
    	}
        var remark = $("#menuselect option:selected").val();
        var menuico = $("#menuico").val();
        var url = $("#menuurl").val();
        var authvalue = $("#addauthvalue").val();
        var type = $('input:radio[name="addradio"]:checked').val();
        $.ajax({
    		type:"post",
    		url:"/sys/insertMenu",
    		data:{"mid":mid,"pid":mid,"menuname":menuname,"remark":remark,"menuico":menuico,"url":url,"type":type,"authvalue":authvalue},
    		dataType:"json",
    		success:function(ret){
    			if(ret.code==0){
    				toastr.info("新增成功");
    				initLoadTreeData();
    				$("#insertcolose").click();			
    				//window.location.href="./page/success.jsp";
    			}else{
    			  alert(ret.msg);
    			}
    		},
    		error:function(e){
    			alert("e:"+e);
    		}
    	});    	
    }
    
    //删除
    
    function deleteMenuByMid(){
    	var mid = $("#editmid").val();
        $.ajax({
    		type:"post",
    		url:"/sys/deleteMenuByMid",
    		data:{"mid":mid},
    		dataType:"json",
    		success:function(ret){
    			if(ret.code==0){
    				toastr.info("删除成功");
    				initLoadTreeData();
    				$("#deletecolose").click();			
    			}else{
    			  alert(ret.msg);
    			}
    		},
    		error:function(e){
    			alert("e:"+e);
    		}
    	});    	
    }

  //修改前显示
function showMenu(){
	window.setTimeout(function(){
		var mid = $("#updatemid").val();
		$.ajax({
	 		type:"post",
	 		url:"/sys/queryMenuByMid",
	 		data:{"mid":mid},
	 		dataType:"json",
	 		success:function(ret){
	 			var showMenu = ret.data;
	 			$("#updatemenuname").val(showMenu.menuname);
	 			if(showMenu.remark == "一级菜单"){
	 				$("#updatemenuselect").val(0);
	 			}else if(showMenu.remark == "二级菜单"){
	 				$("#updatemenuselect").val(1);
	 			}else{
	 				$("#updatemenuselect").val(2);
	 			}
	 			$("#updatemenuico").val(showMenu.ico);
	 			$("#updatemenuurl").val(showMenu.url);
	 			if(showMenu.type == "1"){
	 				$("#radio3").attr("checked");
	 			}else{
	 				$("#radio4").attr("checked");
	 			}
	 			$("#updatemenuauthvalue").val(showMenu.authvalue);
	 			
	 		},
	 		error:function(e){
	 			alert("e:"+e);
	 		}
	 	});    
		
	},300);
}    

    
//修改
 function updateMenu(){
	var mid = $("#updatemid").val();
 	var pid = $("#editpid").val();
 	var menuname = $("#updatemenuname").val();
 	if(!menuname){
 		$("#insertMenumsg").html("<font color='red'>名称不能为空</font>");
 		return;
 	}
     var remark = $("#updatemenuselect option:selected").val();
     var menuico = $("#updatemenuico").val();
     var url = $("#updatemenuurl").val();
     var authvalue = $("#updatemenuauthvalue").val();
     var type = $('input:radio[name="updateradio"]:checked').val();
     $.ajax({
 		type:"post",
 		url:"/sys/updateMenu",
 		data:{"mid":mid,"pid":pid,"menuname":menuname,"remark":remark,"menuico":menuico,"url":url,"type":type,"authvalue":authvalue},
 		dataType:"json",
 		success:function(ret){
 			if(ret.data>=0){
 				toastr.info("修改成功");
 				initLoadTreeData();
 				$("#updateMenucolose").click();			
 			}else{
 			  alert(ret.msg);
 			}
 		},
 		error:function(e){
 			alert("e:"+e);
 		}
 	});    
	
}
    
    function add(mid,pid) {
        //alert("add 方法 , mid = " + mid+ ", pid = "+pid);
        
        
    }
    function del(mid,pid) {
    	//alert("del 方法 , mid = " + mid+ ", pid = "+pid);
    }
    function update(mid) {
        //alert("update 方法 , mid = " + mid);
    }


</script>
</html>
